import { createVNode, render } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import LoadingBar from "@/components/LoadingBar.vue";

declare module "vue-router" {
  interface RouteMeta {
    title: string;
  }
}

export const routes = [
  {
    path: "/",
    name: "Home",
    meta: {
      title: "首页",
    },
    component: () => import("@/views/HomeView.vue"),
  },
  {
    path: "/login",
    name: "Login",
    meta: {
      title: "登录",
    },
    component: () => import("@/views/LoginView.vue"),
  },
  {
    path: "/pinia",
    name: "Pinia",
    meta: {
      title: "Pinia",
      unit: true,
    },
    component: () => import("@/views/discreteness/PiniaView/index.vue"),
  },
  {
    path: "/timeLine",
    name: "TimeLine",
    meta: {
      title: "小事记",
      unit: true,
    },
    component: () => import("@/views/discreteness/TimeLine/index.vue"),
  },
  {
    path: "/fallsFlow",
    name: "FallsFlow",
    meta: {
      title: "瀑布流",
      unit: true,
    },
    component: () => import("@/views/discreteness/FallsFlow/index.vue"),
  },
  {
    path: "/carousel",
    name: "Carousel",
    meta: {
      title: "轮播",
      unit: true,
    },
    component: () => import("@/views/discreteness/CarouselView/index.vue"),
  },
  {
    path: "/persiennes",
    name: "Persiennes",
    meta: {
      title: "百叶窗",
      unit: true,
    },
    component: () => import("@/views/discreteness/PersiennesView/index.vue"),
  },
  {
    path: "/slither",
    name: "Slither",
    meta: {
      title: "下拉滑动",
      unit: true,
    },
    component: () => import("@/views/discreteness/SlitherView/index.vue"),
  },
  {
    path: "/virtualList",
    name: "VirtualList",
    meta: {
      title: "虚拟列表",
      unit: true,
    },
    component: () => import("@/views/discreteness/virtualList/index.vue"),
  },
  {
    path: "/fileUpload",
    name: "FileUpload",
    meta: {
      title: "文件上传",
      unit: true,
    },
    component: () => import("@/views/discreteness/FileUpload/index.vue"),
  },
  {
    path: "/cssExam",
    name: "CssExam",
    meta: {
      title: "CSS示例",
      unit: true,
    },
    component: () => import("@/views/discreteness/CssExam/index.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 滚动行为
  scrollBehavior: (to, from, posi) => {
    // console.log("posi", posi);
    if (posi) return posi;
    else return { top: 0 };
  },
  routes,
});

const Load = createVNode(LoadingBar);
render(Load, document.body);

// 白名单
const whiteList = <string[]>[];

for (let rou of routes) {
  whiteList.push(rou.path);
}

router.beforeEach((to, from) => {
  // console.log("beforeEach", to, from);
  Load.component?.exposed?.loadingStart(); // 页面加载进度条
  if (!whiteList.includes(to.path)) return "/login";
});

router.afterEach((to, from) => {
  // console.log("afterEach", to, from);
  document.title = to.meta.title;
  setTimeout(() => {
    Load.component?.exposed?.loadingEnd();
  }, 100);
});

export default router;
